<template>
  <div class="order">
    <!-- {{ALlDetailsData}} -->
    <!-- 导航栏 -->
    <van-nav-bar
      title="订单详情"
      left-arrow
      left-text="返回"
      @click-left="onClickLeft"
    />
    <!-- 内容展示区域 -->
    <div class="content" style="width: 90%; margin: 0 auto; margin-top: 3%">
      <!-- 商品 -->
      <van-card
        class="detailscard"
        style="font-size: 14px"
        v-for="order in OrderDetailsData"
        :key="order.id"
        :num="order.number"
        :price="order.price"
        :desc="order.product.description"
        :title="order.product.name"
        :thumb="order.product.photo"
      ></van-card>
      <!-- 状态 -->
      <div
        style="padding-right:3%;box-shadow: 0 1px 5px #aaa;font-size:14pxheight:60px;line-height:60px;text-align:right;"
      >
        总计：<span style="color: red; text-align: right"
          >￥{{ ALlDetailsData.total }}</span
        >
      </div>
      <div class="list">
        <p>
          服务地址：{{
            ALlDetailsData.address.province +
            ALlDetailsData.address.city +
            ALlDetailsData.address.area +
            ALlDetailsData.address.address
          }}
        </p>
        <p>
          联系方式：{{ ALlDetailsData.employee.username }}({{
            ALlDetailsData.employee.telephone
          }})
        </p>
        <p>下单时间：{{ turnTime(ALlDetailsData.orderTime) }}</p>
        <p>服务时间：{{ turnTime(ALlDetailsData.serviceTime) }}</p>
        <p style="text-align: right; padding-right: 3%">
          {{ ALlDetailsData.status }}
        </p>
      </div>
      <van-button
        style="float: right"
        round
        v-if="ALlDetailsData.status == '待服务'"
        type="info"
        @click="queryServeEnd(ALlDetailsData.id)"
        >服务结束</van-button
      >
    </div>
  </div>
</template>

<script>
// 引入moment
import moment from "moment";
// 引入axios
import { get } from "@/http/axios";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      OrderId: this.$route.query.orderId,
    };
  },
  computed: {
    ...mapState("orderDetails", ["OrderDetailsData"]),
    ...mapState("orderDetails", ["ALlDetailsData"]),
  },
  methods: {
    ...mapActions("orderDetails", ["getEmployeeOrderDetailsData"]),
    //跳转页面
    onClickLeft() {
      this.$router.go(-1);
    },
    //获取订单详情
    queryEmployeeOrderDetails() {
      let data = {
        id: this.OrderId,
      };
      this.getEmployeeOrderDetailsData(data);
    },
    turnTime(date) {
      //把时间戳转成时间日期 方法
      return moment(date).format("YYYY-MM-DD A HH:mm");
    },
    //服务完成按钮
    async queryServeEnd(orderId) {
      let res = await get("/order/serviceCompleteOrder", { orderId });
      // console.log(res.data.message)
      if (res.data.status == 200) {
        Toast(res.data.message);
      }
    },
  },
  created() {
    // 自动获取数据
    this.queryEmployeeOrderDetails();
  },
};
</script>
<style scoped>
.van-nav-bar {
  background-image: linear-gradient(to top, #ebc0fd 0%, #d9ded8 100%);
}
.list {
  background-color: rgb(248, 248, 248);
  font-size: 14px;
  color: rgb(153, 153, 153);
  box-shadow: 0 1px 5px #aaa;
}
.detailscard {
  margin: 0 auto;
  box-shadow: 0 1px 5px #aaa;
  background-color: #fff;
}
</style>